<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/css/bootstrap.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <style>
      tr.odd {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>表格操作示例</h1>
    <div class="table-responsive">
      <table id="dataTable" class="table table-hover">
        <thead>
          <tr>
            <th><input type="checkbox" id="chkall"></th>
            <th>项目名称</th>
            <th>开始日期</th>
            <th>截止日期</th>
            <th>状态</th>
            <th>进度</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" name="chkbox" value="101"></td>
            <td>设计新主题</td>
            <td>10/02/2019</td>
            <td>12/05/2019</td>
            <td><span class="label label-warning">待定</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-warning" style="width: 45%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="102"></td>
            <td>网站重新设计</td>
            <td>01/03/2019</td>
           <td>12/04/2019</td>
            <td><span class="label label-success">进行中</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="103"></td>
            <td>模型设计</td>
             <td>10/10/2019</td>
             <td>12/11/2019</td>
            <td><span class="label label-warning">待定</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-warning" style="width: 25%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="104"></td>
            <td>后台管理系统模板设计</td>
            <td>25/01/2019</td>
            <td>09/05/2019</td>
            <td><span class="label label-success">进行中</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-success" style="width: 55%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="105"></td>
            <td>前端设计</td>
            <td>10/10/2019</td>
            <td>12/12/2019</td>
            <td><span class="label label-danger">未开始</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-danger" style="width: 0%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="106"></td>
            <td>桌面软件测试</td>
            <td>10/01/2019</td>
            <td>29/03/2019</td>
            <td><span class="label label-success">进行中</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="107"></td>
            <td>APP改版开发</td>
            <td>25/02/2019</td>
            <td>12/05/2019</td>
            <td><span class="label label-danger">暂停</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-danger" style="width: 15%;"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox" value="108"></td>
            <td>Logo设计</td>
            <td>10/02/2019</td>
            <td>01/03/2019</td>
            <td><span class="label label-warning">完成</span></td>
            <td>
              <div class="progress progress-striped progress-sm">
                <div class="progress-bar progress-bar-success" style="width: 100%;"></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/js/jquery-2.2.4.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(function() {
      // 全选、取消全选
      $('#chkall').on('click', function() {
        if(this.checked) {
          $('input[name="chkbox"]').each(function(index, item) {
            $(item)[0].checked = true;
          })
        } else {
          $('input[name="chkbox"]').each(function(index, item) {
            $(item)[0].checked = false;
          })
        }
      });

      var defaults = [101, 103, 105, 107];
      // 默认选中
      $('input[name="chkbox"]').each(function(index, item) {
        for(var i = 0; i < defaults.length; i++) {
          if($(item).val() == defaults[i]) {
            $(item)[0].checked = true;
          }
        }
      });

      // 不用jquery
      var tableRows = document.getElementById('dataTable').rows;
      for(var i = 0; i< tableRows.length; i++) {
        var row = tableRows[i];
        var columns = row.children;
        var td = columns[0];
        var checkbox = td.children[0];
        if(checkbox.value % 2 == 0) {
          console.log(checkbox);
          row.className = 'odd';
        }
      }
    });
    </script>
  </body>
</html>